import React, { useRef, useState } from 'react';
import { ActionType, PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, Flex, message, Modal } from 'antd';
import { deleteRoleFun, getAllRoleFun } from '@/services/ant-design-pro/systemApi';
import { PlusOutlined } from '@ant-design/icons';
import RoleModalForm from '@/pages/system/roleList/RoleModalForm';
import RoleMenuModal from '@/pages/system/roleList/RoleMenuModal';

// 角色列表
function RoleList() {
  const [currentRow, setCurrentRow] = useState<API.RuleListItem>();
  const tableRef = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState<boolean>(false);
  const [menuOpen, setMenuOpen] = useState<boolean>(false);

  const columns = [
    {
      title: '用户ID',
      dataIndex: 'roleId',
      search: false,
      copyable: true, // 是否允许复制
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
    },
    {
      title: '角色标识',
      dataIndex: 'roleKey',
      search: false,
    },
    {
      title: '创建人',
      dataIndex: 'createBy',
      key: 'createBy',
      search: false,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      search: false,
    },
    {
      title: '更新人',
      dataIndex: 'updateBy',
      search: false,
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      search: false,
    },
    {
      title: '操作',
      search: false,
      render: (_, record) => (
        <Flex gap="small">
          <Button type="primary" onClick={() => updateRow(record)}>
            编辑
          </Button>
          <Button onClick={() => removeRow(record)}>删除</Button>
          <Button type="primary" onClick={() => showMenuModal(record)}>
            分配菜单
          </Button>
        </Flex>
      ),
    },
  ];

  const addRole = () => {
    setCurrentRow(null);
    setModalVisit(true);
  };

  const updateRow = async (row) => {
    setCurrentRow(row);
    setModalVisit(true);
  };

  const removeRow = async (row) => {
    Modal.confirm({
      title: '提示',
      content: '确认删除该角色吗?',
      onOk() {
        deleteRoleFun(row.roleId).then((res) => {
          message.success(res.msg);
          tableRef.current?.reload();
        });
      },
    });
  };

  const getTable = async (params) => {
    let res = await getAllRoleFun(params);
    return {
      success: true,
      data: res.data,
    };
  };

  const modelCancel = (type?: boolean) => {
    setModalVisit(false);
    setCurrentRow(null);
    type && tableRef.current?.reload();
  };

  const showMenuModal = (row) => {
    setCurrentRow(row);
    setMenuOpen(true);
  };

  const onMenuCancel = () => {
    setMenuOpen(false);
  };

  return (
    <>
      <PageContainer title={false}>
        <ProTable
          actionRef={tableRef}
          toolBarRender={() => [
            <Button type="primary" key="primary" onClick={addRole}>
              <Flex align={'center'} gap={'small'}>
                <PlusOutlined /> 新增角色
              </Flex>
            </Button>,
          ]}
          rowKey={'roleId'}
          columns={columns}
          request={getTable}
          pagination={false}
        />
      </PageContainer>

      {/*新增-编辑弹框*/}
      <RoleModalForm modalVisit={modalVisit} currentRow={currentRow} onCancel={modelCancel} />

      {/*角色菜单*/}
      <RoleMenuModal open={menuOpen} currentRow={currentRow} onCancel={onMenuCancel} />
    </>
  );
}

export default RoleList;
